<section id="timeline" class="timeline-right timeline-wrapper">
    <h3 class="page-title text-center text-lg-right">Timeline</h3>
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-group">
            <a href="#" class="btn btn-primary"><i class="la la-calendar"></i> Today</a>
        </li>
    </ul>
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="bg-red bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Portfolio project work"><i class="la la-plane"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <h4 class="card-title"><a href="#">Portfolio project work</a></h4>
                    <p class="card-subtitle text-muted pt-1">
                        <span class="font-small-3">5 hours ago</span>
                    </p>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline pt-1">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <img class="img-fluid" src="../../../app-assets/images/portfolio/width-1200/portfolio-2.jpg" alt="Timeline Image 1">
                                <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                                <ul class="list-inline mb-0">
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Comment</a></li>
                                    <li><a href="#" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
                                </ul>
                                <div class="media">
                                    <div class="media-left pr-1">
                                        <a href="#">
                                            <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-2.png" alt="avatar"></span>
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-bold-600 mb-0"><a href="#">Jason Ansley</a></p>
                                        <p class="m-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                                        <ul class="list-inline mb-0">
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                        </ul>
                                        <div class="media">
                                            <div class="media-left pr-1">
                                                <a href="#">
                                                    <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-18.png" alt="avatar"></span>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <p class="text-bold-600 mb-0"><a href="#">Janice Johnston</a></p>
                                                <p class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
                                                <ul class="list-inline mb-0">
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <fieldset class="form-group position-relative has-icon-left mb-0">
                                        <input type="text" class="form-control" placeholder="Write comments...">
                                        <div class="form-control-position">
                                            <i class="ft-message-square"></i>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <img class="img-fluid" src="../../../app-assets/images/portfolio/width-1200/portfolio-3.jpg" alt="Timeline Image 1">
                                <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                                <ul class="list-inline mb-0">
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Comment</a></li>
                                    <li><a href="#" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
                                </ul>
                                <div class="media">
                                    <div class="media-left pr-1">
                                        <a href="#">
                                            <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-3.png" alt="avatar"></span>
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-bold-600 mb-0"><a href="#">Jason Ansley</a></p>
                                        <p class="m-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                                        <ul class="list-inline mb-0">
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                        </ul>
                                        <div class="media">
                                            <div class="media-left pr-1">
                                                <a href="#">
                                                    <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-18.png" alt="avatar"></span>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <p class="text-bold-600 mb-0"><a href="#">Janice Johnston</a></p>
                                                <p class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
                                                <ul class="list-inline mb-0">
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <fieldset class="form-group position-relative has-icon-left mb-0">
                                        <input type="text" class="form-control" placeholder="Write comments...">
                                        <div class="form-control-position">
                                            <i class="ft-message-square"></i>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="bg-red bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Portfolio project work"><i class="la la-plus-square-o"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <h4 class="card-title"><a href="#">Project work</a></h4>
                    <p class="card-subtitle text-muted pt-1">
                        <span class="font-small-3">5 hours ago</span>
                    </p>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline pt-1">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <img class="img-fluid" src="../../../app-assets/images/portfolio/width-1200/portfolio-1.jpg" alt="Timeline Image 1">
                                <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                                <ul class="list-inline mb-0">
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Comment</a></li>
                                    <li><a href="#" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="media">
                                    <div class="media-left pr-1">
                                        <a href="#">
                                            <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-1.png" alt="avatar"></span>
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <p class="text-bold-600 mb-0"><a href="#">Jason Ansley</a></p>
                                        <p class="m-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
                                        <ul class="list-inline mb-0">
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                            <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                        </ul>
                                        <div class="media">
                                            <div class="media-left pr-1">
                                                <a href="#">
                                                    <span class="avatar avatar-online"><img src="../../../app-assets/images/portrait/small/avatar-s-18.png" alt="avatar"></span>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <p class="text-bold-600 mb-0"><a href="#">Janice Johnston</a></p>
                                                <p class="m-0">Gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
                                                <ul class="list-inline mb-0">
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Replay</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <fieldset class="form-group position-relative has-icon-left mb-0">
                                        <input type="text" class="form-control" placeholder="Write comments...">
                                        <div class="form-control-position">
                                            <i class="ft-message-square"></i>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="timeline-item mt-3">
            <div class="timeline-badge">
                <span class="avatar avatar-online" data-toggle="tooltip" data-placement="left" title="Eu pid nunc urna integer"><img src="../../../app-assets/images/portrait/small/avatar-s-14.png" alt="avatar"></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <h4 class="card-title"><a href="#">Sofia Orav</a></h4>
                    <p class="card-subtitle text-muted pt-1">
                        <span class="font-small-3">8 hours ago</span>
                    </p>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body row">
                        <div class="col-lg-6 col-12">
                            <div class="embed-responsive embed-responsive-4by3">
                                <iframe src="https://player.vimeo.com/video/118589137?title=0&byline=0"></iframe>
                            </div>
                        </div>
                        <div class="col-lg-6 col-12">
                            <div class="card-content">
                                <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                                <p class="card-text">Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque. Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt! Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
                                <ul class="list-inline mb-0">
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-heart-o"></span> Like</a></li>
                                    <li class="pr-1"><a href="#" class="text-muted"><span class="la la-comments-o"></span> Comment</a></li>
                                    <li><a href="#" class="text-muted"><span class="la la-share-alt"></span> Share</a></li>
                                </ul>
                            </div>
                            <div class="card-footer px-0 py-0">
                                <fieldset class="form-group position-relative has-icon-left mb-0">
                                    <input type="text" class="form-control" placeholder="Write comments...">
                                    <div class="form-control-position">
                                        <i class="ft-message-square"></i>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Portfolio project work"><i class="la la-bar-chart-o"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <div class="text-center pt-1">
                        <h4>Campaign Report</h4>
                        <p class="timeline-date">18 hours ago</p>
                        <p>Rhoncus, vel dignissim in scelerisque. Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="chart-container">
                            <div id="stacked-column" class="height-400 overflow-hidden echart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <!-- 2016 -->
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-group">
            <a href="#" class="btn btn-primary"><i class="la la-calendar"></i> 2016</a>
        </li>
    </ul>
    <ul class="timeline">
        <li class="timeline-line"></li>
        <!-- /.timeline-line -->
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="avatar avatar-online" data-toggle="tooltip" data-placement="left" title="Eu pid nunc urna integer"><img src="../../../app-assets/images/portrait/small/avatar-s-5.png" alt="avatar"></span>
            </div>
            <div class="row match-height">
                <div class="col-lg-8 col-12">
                    <div class="timeline-card card bg-dark text-white">
                        <img class="card-img img-fluid" src="../../../app-assets/images/portfolio/width-1200/portfolio-2.jpg" alt="Card image">
                        <div class="card-img-overlay bg-overlay">
                            <h4 class="card-title white">Good Morning</h4>
                            <p class="card-text"><small>26 Aug, 2016 at 2.00 A.M</small></p>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-body">
                                <h4 class="card-title">List Group</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <span class="badge badge-default badge-pill bg-primary float-right">4</span> Cras justo odio
                                </li>
                                <li class="list-group-item">
                                    <span class="badge badge-default badge-pill bg-info float-right">2</span> Dapibus ac facilisis in
                                </li>
                                <li class="list-group-item">
                                    <span class="badge badge-default badge-pill bg-warning float-right">1</span> Morbi leo risus
                                </li>
                                <li class="list-group-item">
                                    <span class="badge badge-default badge-pill bg-success float-right">3</span> Porta ac consectetur ac
                                </li>
                                <li class="list-group-item">
                                    <span class="badge badge-default badge-pill bg-danger float-right">8</span> Vestibulum at eros
                                </li>
                            </ul>
                            <div class="card-body">
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="timeline-item mt-3">
            <div class="timeline-badge">
                <span class="bg-teal bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Nullam facilisis fermentum"><i class="la la-check"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <h4 class="card-title"><a href="#">Sofia Orav</a></h4>
                    <p class="card-subtitle text-muted pt-1">
                        <span class="font-small-3">18 June, 2016 at 4.50 P.M</span>
                    </p>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content">
                    <div class="row card-body">
                        <div class="col-lg-6 col-12">
                            <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                            <ul class="list-group icheck-task">
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-1"> Cras justo odio</li>
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-2" checked> Dapibus ac facilisis in</li>
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-3"> Morbi leo risus</li>
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-4" disabled checked> Porta ac consectetur ac</li>
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-5"> Vestibulum at eros</li>
                                <li class="list-group-item">
                                    <input type="checkbox" id="input-6" disabled checked> Porta ac consectetur ac</li>
                            </ul>
                        </div>
                        <div class="col-lg-6 col-12">
                            <p class="card-text">Nullam facilisis fermentum aliquam. Suspendisse ornare dolor vitae libero hendrerit auctor lacinia a ligula. Curabitur elit tellus, porta ut orci sed, fermentum bibendum nisi.</p>
                            <div class="chart-container">
                                <div id="non-ribbon-chord" class="height-300 overflow-hidden echart-container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer px-0 py-0">
                        <div class="card-body">
                            <fieldset class="form-group position-relative has-icon-left mb-0">
                                <input type="text" class="form-control" placeholder="Write comments...">
                                <div class="form-control-position">
                                    <i class="ft-message-square"></i>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <!-- 2015 -->
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-group">
            <a href="#" class="btn btn-primary"><i class="la la-calendar"></i> 2015</a>
        </li>
    </ul>
    <ul class="timeline">
        <li class="timeline-line"></li>
        <!-- /.timeline-line -->
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="bg-success bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Portfolio project work"><i class="la la-image"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header">
                    <div class="text-center pt-1">
                        <h4>Media Gallery</h4>
                        <p class="timeline-date">July 1, 2015</p>
                        <p>Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a pulvinar, rhoncus sagittis ut nunc elit! Sociis in et?</p>
                    </div>
                </div>
                <!-- Image grid -->
                <div class="card-body my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
                    <div class="row">
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/1.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/1.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/2.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/2.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/3.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/3.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/4.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/4.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                    </div>
                    <div class="row">
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/5.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/5.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/6.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/6.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/7.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/7.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/8.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/8.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                    </div>
                    <div class="row">
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/9.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/9.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/10.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/10.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/11.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/11.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                        <figure class="col-md-3 col-sm-6 col-12" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                            <a href="../../../app-assets/images/gallery/12.jpg" itemprop="contentUrl" data-size="480x360">
                                <img class="img-thumbnail img-fluid" src="../../../app-assets/images/gallery/12.jpg" itemprop="thumbnail" alt="Image description" />
                            </a>
                        </figure>
                    </div>
                </div>
                <!--/ Image grid -->
                <!-- Root element of PhotoSwipe. Must have class pswp. -->
                <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
                    <!-- Background of PhotoSwipe. 
                   It's a separate element as animating opacity is faster than rgba(). -->
                    <div class="pswp__bg"></div>
                    <!-- Slides wrapper with overflow:hidden. -->
                    <div class="pswp__scroll-wrap">
                        <!-- Container that holds slides. 
                      PhotoSwipe keeps only 3 of them in the DOM to save memory.
                      Don't modify these 3 pswp__item elements, data is added later on. -->
                        <div class="pswp__container">
                            <div class="pswp__item"></div>
                            <div class="pswp__item"></div>
                            <div class="pswp__item"></div>
                        </div>
                        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
                        <div class="pswp__ui pswp__ui--hidden">
                            <div class="pswp__top-bar">
                                <!--  Controls are self-explanatory. Order can be changed. -->
                                <div class="pswp__counter"></div>
                                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                                <button class="pswp__button pswp__button--share" title="Share"></button>
                                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                                <!-- element will get class pswp__preloader-active when preloader is running -->
                                <div class="pswp__preloader">
                                    <div class="pswp__preloader__icn">
                                        <div class="pswp__preloader__cut">
                                            <div class="pswp__preloader__donut"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                <div class="pswp__share-tooltip"></div>
                            </div>
                            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                            </button>
                            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                            </button>
                            <div class="pswp__caption">
                                <div class="pswp__caption__center"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ PhotoSwipe -->
            </div>
        </li>
    </ul>
    <!-- 2014 -->
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-group">
            <a href="#" class="btn btn-primary"><i class="la la-calendar"></i> 2014</a>
        </li>
    </ul>
    <ul class="timeline">
        <li class="timeline-line"></li>
        <!-- /.timeline-line -->
        <li class="timeline-item">
            <div class="timeline-badge">
                <span class="bg-primary bg-lighten-1" data-toggle="tooltip" data-placement="left" title="Moved to Brooklyn"><i class="la la-map"></i></span>
            </div>
            <div class="timeline-card card border-grey border-lighten-2">
                <div class="card-header ">
                    <div class="text-center pt-1">
                        <h4>Moved to Brooklyn</h4>
                        <p class="timeline-date">Jan 1, 2014</p>
                        <p>Eu pid nunc urna integer, sed, cras tortor scelerisque penatibus facilisis a pulvinar, rhoncus sagittis ut nunc elit! Sociis in et? Rhoncus, vel dignissim in scelerisque. Dolor lacus pulvinar adipiscing adipiscing montes! Elementum risus adipiscing non, cras scelerisque risus penatibus? Massa vut, habitasse, tincidunt!</p>
                    </div>
                </div>
                <div class="card-body">
                    <div id="moved-brooklyn" class="height-450"></div>
                </div>
            </div>
        </li>
    </ul>
    <!-- 2014 -->
    <ul class="timeline">
        <li class="timeline-line"></li>
        <li class="timeline-group">
            <a href="#" class="btn btn-primary"><i class="la la-calendar"></i> Founded in 2012</a>
        </li>
    </ul>
</section>
